<template>
  <!-- 招商数据-中间-客户来访/成交趋势折线图 -->
  <div class="echart-box" :style="{width: '100%', height: '100%'}">
    <div id="lineChart" :style="{width: '100%', height: '98%'}"></div>
    <a-modal
      v-if="result" 
      v-model="visible" 
      title="统计结果" 
      :footer="null"
    >
      <p class="fx-box">
        <span class="fx-title">总观测数</span>
        <span class="fx-value">{{ all_num || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">缺失率</span>
        <span class="fx-value">{{ result.miss_rate || 0 }}%</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">最大值</span>
        <span class="fx-value">{{ result.max_value || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">上1/4位数</span>
        <span class="fx-value">{{ result.up_quantile || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">中位数</span>
        <span class="fx-value">{{ result.median || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">下1/4位数</span>
        <span class="fx-value">{{ result.lower_quantile || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">最小值</span>
        <span class="fx-value">{{ result.min_value || 0 }}</span>
      </p>
      
      <p class="fx-box">
        <span class="fx-title">平均值</span>
        <span class="fx-value">{{ result.avg_value || 0 }}</span>
      </p>
      <p class="fx-box">
        <span class="fx-title">标准差</span>
        <span class="fx-value">{{ result.std || 0 }}</span>
      </p>
    </a-modal>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    xData: {
      type: Array,
      required: true
    },
    targetData: {
      type: Array,
      required: true
    },
    choiceData: {
      type: Array,
      required: true
    },
    legendArr: {
      type: Array,
      required: true
    },
    result:{
      type: Object
    },
    all_num: {
      type: String | Number,
    }
  },
  data() {
    return {
      visible:true,
      myChart: null,
      sampleName:null,
      varName:null,
      subType:null,
      subNumber:null,
      targetName:null
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawLine()
    })
    window.addEventListener('resize', this.resizeChart)
  },
  activated() {
    if(this.myChart){
      this.resizeChart()
    }
  },
  methods: {
    resizeChart() {
      this.myChart.resize()
    },
    drawLine() {
      // let colorList = []
      // for (let index = 0; index < this.xData.length; index++) {
      //   colorList.push('#49a9ee', '#98d87d', '#ffd86e', '#f3857b', '#8996e6')
      // }
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('lineChart'))
      // 绘制图表
      const { result,xData,targetData,choiceData,legendArr,
        sampleName,varName,subType,subNumber,targetName } = this
      this.myChart.setOption({
        title:{
          text:sampleName?`分析数据集-${sampleName}`:'',
          subtext :
          (varName?`分析字段: ${varName}\n`:'') +
          (targetName? `目标变量:${targetName}\n`:'') + 
          (subType? `分箱方式: ${subType}\n`:'') +
          (subNumber? `分箱个数: ${subNumber}`:'')
        },
        toolbox:{
          feature:{
            saveAsImage:{
              type:'png',
              name:'变量评价'
            },
            myResult:{
              show:result.have,
              title:'查看统计结果',
              icon:'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
              onclick:()=>{
                this.visible = true
              }
            }
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff',
            },
          },
        },
        legend: {
          top: "20",
          x: "6%",
          data: legendArr,
          textStyle: {
            fontSize: 16,
            color: "rgba(101, 213, 255, 1)"
          },
          itemWidth:14, // 设置宽度
          itemHeight: 14, // 设置高度、
          itemGap: 12 // 设置间距
        },
        grid: {
          top: '15%',
          left: '2%',
          right: '3%',
          bottom: '10%',
          containLabel: true
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          color: '#59588D',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#d8d8d8',
              width: 1
            },
          },
          axisTick: {
          show: false
          },
          // boundaryGap: false,
          axisLabel: {
            color: '#999'
          },
          data: xData,

        }],

        yAxis: [{
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#737373',
              opacity:0.2,
              type: 'dashed'
            }
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 30,
            textStyle: {
              color: '#999',
            },
          },
          axisTick: {
            show: false,
          },
        }],
        dataZoom: [
          {
            show: true,
            height: 18,
            xAxisIndex: [0],
            bottom: 10,
            start: 0,
            end: 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
              color:"#d3dee5",
            },
            textStyle:{
              color:"#fff"
            },
            fillerColor: '#dce2eb',
            borderColor:"#dddddd"
          }, {
            type: "inside",
            show: true,
            height: 15,
            start: 0,
            end: 35
        }],
        series: [{
          name: '选中的变量',
          type: 'bar',
          barMaxWidth: 35,
          stack: '1',
          barGap: '10%',
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: '#98d87d'
            },
          },
          data: choiceData,
        },{
          name: '目标变量',
          type: 'bar',
          stack: '1',
          barMaxWidth: 35,
          barGap: '10%',
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: '#ffd86e'
            },
          },
          data: targetData,
        }]
      })
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>
